{% extends 'admin_panel/base.html' %}

{% block title %}旅行记录管理 - 旅行记录管理系统{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.travel-checkbox');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    
    // 全选/取消全选
    selectAll.addEventListener('change', function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        toggleBulkDeleteBtn();
    });
    
    // 单个复选框变化
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            // 更新全选状态
            selectAll.checked = [...checkboxes].every(cb => cb.checked);
            toggleBulkDeleteBtn();
        });
    });
    
    // 切换批量删除按钮显示
    function toggleBulkDeleteBtn() {
        const selectedCount = [...checkboxes].filter(cb => cb.checked).length;
        bulkDeleteBtn.style.display = selectedCount > 0 ? 'block' : 'none';
        bulkDeleteBtn.textContent = `批量删除 (${selectedCount})`;
    }
    
    // 批量删除操作
    bulkDeleteBtn.addEventListener('click', function() {
        const selectedIds = [...checkboxes]
            .filter(cb => cb.checked)
            .map(cb => cb.value);
        
        if (selectedIds.length === 0) {
            alert('请选择要删除的旅行记录');
            return;
        }
        
        if (confirm(`确定要删除选中的 ${selectedIds.length} 条旅行记录吗？此操作不可恢复。`)) {
            // 创建表单提交
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{% url "admin_panel:admin_travel_bulk_delete" %}';
            
            // 添加CSRF token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'csrfmiddlewaretoken';
            csrfInput.value = '{{ csrf_token }}';
            form.appendChild(csrfInput);
            
            // 添加选中的ID
            selectedIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'travel_ids';
                input.value = id;
                form.appendChild(input);
            });
            
            // 提交表单
            document.body.appendChild(form);
            form.submit();
        }
    });
});
</script>
{% endblock %}
{% block page_title %}旅行记录管理{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">旅行记录列表</h5>
        <div class="d-flex">
            <!-- 创建按钮 -->
            <a href="{% url 'admin_panel:admin_travel_create' %}" class="btn btn-primary me-2">
                <i class="bi bi-plus-lg me-1"></i>新增记录
            </a>
            
            <!-- 批量操作按钮 -->
            <button type="button" class="btn btn-outline-danger me-2" id="bulkDeleteBtn" style="display: none;">
                <i class="bi bi-trash me-1"></i>批量删除
            </button>
            
            <!-- 搜索表单 -->
            <form method="get" class="search-form me-2">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="搜索标题、描述或位置..." 
                           value="{{ search_query }}">
                    <button class="btn btn-outline-secondary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </form>
            
            <!-- 用户过滤 -->
            <form method="get" class="me-2">
                <select name="user" class="form-select" onchange="this.form.submit()">
                    <option value="">所有用户</option>
                    {% for user in users %}
                    <option value="{{ user.id }}" {% if selected_user == user.id|stringformat:"s" %}selected{% endif %}>
                        {{ user.username }}
                    </option>
                    {% endfor %}
                </select>
            </form>
        </div>
    </div>
    
    <div class="card-body">
        {% if travels %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="50">
                            <input type="checkbox" id="selectAll" class="form-check-input">
                        </th>
                        <th>标题</th>
                        <th>用户</th>
                        <th>位置</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for travel in travels %}
                    <tr>
                        <td>
                            <input type="checkbox" name="travel_ids" value="{{ travel.pk }}" class="form-check-input travel-checkbox">
                        </td>
                        <td>
                            <strong>{{ travel.title }}</strong>
                            {% if travel.images %}
                            <span class="badge bg-info ms-1">
                                <i class="bi bi-image"></i> {{ travel.images|length }}
                            </span>
                            {% endif %}
                        </td>
                        <td>{{ travel.user.username }}</td>
                        <td>
                            {% if travel.location %}
                            {{ travel.location }}
                            {% else %}
                            <span class="text-muted">未设置</span>
                            {% endif %}
                        </td>
                        <td>{{ travel.start_date }}</td>
                        <td>
                            {% if travel.end_date %}
                            {{ travel.end_date }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>{{ travel.created_at|date:"Y-m-d H:i" }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'admin_panel:admin_travel_detail' travel.pk %}" 
                                   class="btn btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{% url 'admin_panel:admin_travel_edit' travel.pk %}" 
                                   class="btn btn-outline-secondary">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form method="post" action="{% url 'admin_panel:admin_travel_delete' travel.pk %}" 
                                      class="d-inline" onsubmit="return confirmDelete('确定要删除这条旅行记录吗？')">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-outline-danger">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        {% if is_paginated %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_user %}&user={{ selected_user }}{% endif %}">上一页</a>
                </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                    <a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_user %}&user={{ selected_user }}{% endif %}">{{ num }}</a>
                </li>
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if selected_user %}&user={{ selected_user }}{% endif %}">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

        {% else %}
        <div class="text-center py-5">
            <i class="bi bi-inbox display-1 text-muted"></i>
            <p class="text-muted mt-3">暂无旅行记录</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
